<script setup lang="ts">
import { getOrderTableDetail } from '@fl/api/anjutong/order-record'
import { ElButton, ElStep, ElSteps, ElTable } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import comPagination from '../com-dialog.vue'

const router = useRouter()

function goList() {
    router.replace('/member-center/order/order-query')
}

const query = useRoute().query
const orderData: any = ref({})
const goodSendDialog = ref({
    align: 'left',
    title: '商品发货',
    width: '500',
})
async function getOrderDetailFn() {
    const res = await getOrderTableDetail(query.orderNo as string)
    orderData.value = res
    console.log(orderData)
}
onMounted(() => {
    getOrderDetailFn()
})
function copyUrl2() {
    const range = document.createRange()
    const Url2: any = document.getElementById('biao1')
    range.selectNode(Url2) // 选择对象
    const selection: any = window.getSelection()
    if (selection.rangeCount > 0)
        selection.removeAllRanges()
    selection.addRange(range)
    document.execCommand('copy')
    ElMessage.success('已复制好，可贴粘。')
    selection.removeRange(range) // 移除选中的元素
}
// 去发货弹窗
const comPaginationRef: any = ref('')

function _toGoodSend() {
    comPaginationRef.value.updataVal()
}
function goodsendFn() {
    console.log('弹窗操作')
}
const goodSendForm = ref({
    mail: '',
    mailID: '',
})
// 取消发货弹窗
const cancelsendGoods: any = ref('')
const cancelSendGoodsData = ref({
    align: 'center',
    title: '取消订单',
    width: '600',
})
function _cancelOrder() {
    cancelsendGoods.value.updataVal()
}
</script>

<template>
    <div class="detail-header">
        <ElButton @click="goList">
            返回列表
        </ElButton>

        <p mt-20>
            <span style="font-size: 20px;font-weight: 700;">{{ orderData.orderStatus }}</span>

            <!-- <ElButton style="margin-left: 10px;"
                      type="primary"
                      @click="toGoodSend"
            >
                去发货
            </ElButton>

            <ElButton type="primary"
                      @click="cancelOrder"
            >
                取消订单
            </ElButton> -->
        </p>

        <div class="main-stap">
            <ElSteps style="width: 60%"
                     :active="orderData.orderCurrentProcessId"
                     align-center
            >
                <ElStep v-for="item in orderData.orderProcessStatusVOList"
                        :key="item.processId"
                        :title="item.processName"
                        :description="item.processDateTime"
                />

                <!-- <ElStep title="付款成功"
                             description="未支付"
                    />

                    <el-step title="商品出库" description="未支付" />
                    <el-step title="买家收货" description="未支付" />
                    <el-step title="完成" description="未支付" /> -->
            </ElSteps>
        </div>
    </div>

    <div class="detail-info">
        <ul class="info">
            <li>
                <p class="title m-b">
                    收货人信息
                </p>

                <p class="m-b">
                    <span class="w">收货人姓名：</span>

                    <span>{{ orderData.consigneeInformationVO && orderData.consigneeInformationVO.consigneeName ? orderData.consigneeInformationVO.consigneeName : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">收货人电话：</span>

                    <span>{{ orderData.consigneeInformationVO && orderData.consigneeInformationVO.consigneeMobile ? orderData.consigneeInformationVO.consigneeMobile : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">收货人地址：</span>

                    <span>{{ orderData.consigneeInformationVO && orderData.consigneeInformationVO.receivingAddress ? orderData.consigneeInformationVO.receivingAddress : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">买家留言：</span>

                    <span>{{ orderData.consigneeInformationVO && orderData.consigneeInformationVO.buyersMessage ? orderData.consigneeInformationVO.buyersMessage : '无'
                    }}</span>
                </p>

                <div v-if="orderData.orderType !== '服务类'">
                    <p class="title m-b">
                        配送信息
                    </p>

                    <p class="m-b">
                        <span class="w">快递公司：</span>

                        <span>{{ orderData.distributionInformation && orderData.distributionInformation.expressCompany ? orderData.consigneeInformationVO.expressCompany : '无'
                        }}</span>
                    </p>

                    <p class="m-b">
                        <span class="w">快递单号：</span>

                        <span>{{ orderData.distributionInformation && orderData.distributionInformation.expressWaybillNumber ? orderData.consigneeInformationVO.expressWaybillNumber : '无'
                        }}</span>
                    </p>

                    <p class="m-b">
                        <span class="w">快递单号：</span>

                        <span>{{ orderData.distributionInformation && orderData.distributionInformation.deliveryTime ? orderData.consigneeInformationVO.deliveryTime : '无'
                        }}</span>
                    </p>
                </div>
            </li>

            <li>
                <p class="title m-b m-r">
                    订单信息
                </p>

                <p class="m-b">
                    <span class="w">订单编号：</span>

                    <span id="biao1">{{ orderData.orderInformationVO && orderData.orderInformationVO.orderNo ? orderData.orderInformationVO.orderNo : '-'
                    }}</span>

                    <ElButton type="text"
                              @click="copyUrl2"
                    >
                        复制
                    </ElButton>
                </p>

                <p class="m-b">
                    <span class="w">下单时间：</span>

                    <span>{{ orderData.orderInformationVO && orderData.orderInformationVO.orderDateTime ? orderData.orderInformationVO.orderDateTime : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">支付时间：</span>

                    <span>{{ orderData.orderInformationVO && orderData.orderInformationVO.paymentDateTime ? orderData.orderInformationVO.paymentDateTime : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">支付方式：</span>

                    <span>{{ orderData.orderInformationVO && orderData.orderInformationVO.paymentWay ? orderData.orderInformationVO.paymentWay : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">订单来源：</span>

                    <span>{{ orderData.orderInformationVO && orderData.orderInformationVO.orderSource ? orderData.orderInformationVO.orderSource : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">订单渠道：</span>

                    <span>{{ orderData.orderInformationVO && orderData.orderInformationVO.orderChannel ? orderData.orderInformationVO.orderChannel : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">订单备注：</span>

                    <span>{{ orderData.orderInformationVO && orderData.orderInformationVO.orderRemark ? orderData.orderInformationVO.orderRemark : '无'
                    }}</span>
                </p>
            </li>

            <li>
                <p class="title m-b m-r">
                    买家信息
                </p>

                <p class="m-b">
                    <span class="w">微信昵称：</span>

                    <span>{{ orderData.buyerInformationVO && orderData.buyerInformationVO.weChatNickName ? orderData.buyerInformationVO.weChatNickName : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">会员姓名：</span>

                    <span>{{ orderData.buyerInformationVO && orderData.buyerInformationVO.memberName ? orderData.buyerInformationVO.memberName : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">会员性别：</span>

                    <span>{{ orderData.buyerInformationVO && orderData.buyerInformationVO.gender ? orderData.buyerInformationVO.gender : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">会员年龄：</span>

                    <span>{{ orderData.buyerInformationVO && orderData.buyerInformationVO.age ? orderData.buyerInformationVO.age : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">手机号码：</span>

                    <span>{{ orderData.buyerInformationVO && orderData.buyerInformationVO.mobile ? orderData.buyerInformationVO.mobile : '-'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">会员ID：</span>

                    <span>{{ orderData.buyerInformationVO && orderData.buyerInformationVO.memberId ? orderData.buyerInformationVO.memberId : '-'
                    }}</span>
                </p>
            </li>
        </ul>
    </div>

    <div class="detail-bottom">
        <p>商品信息</p>

        <div>
            <ElTable :data="orderData.productInformationVO && orderData.productInformationVO.productList"
                     border
            >
                <el-table-column label="商品信息">
                    <template #default="scope">
                        <div style="display: flex;    align-items: center;">
                            <img class="img"
                                 :src="scope.row.productThumbnail"
                                 alt=""
                            >

                            <span>{{ scope.row.merchantName }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="价格"
                                 prop="productPrice"
                />

                <el-table-column label="数量"
                                 prop="productPrice"
                />

                <el-table-column label="优惠">
                    <template #default="scope">
                        <p>{{ scope.row.commodityDiscountName || '-' }}</p>

                        <p style="color: red">
                            {{ scope.row.commodityDiscount || '-' }}
                        </p>
                    </template>
                </el-table-column>

                <el-table-column label="订单状态">
                    <template #default="scope">
                        <span style="color:rgb(9 205 138 / 100%)">{{ scope.row.orderStatus }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="商品名称">
                    <template #default="scope">
                        <span style="color:rgb(9 205 138 / 100%)">{{ scope.row.merchantName }}</span>
                    </template>
                </el-table-column>
            </ElTable>
        </div>

        <div class="bottom-txt">
            <p class="m-b">
                本单积分：{{
                    orderData.productInformationVO && orderData.productInformationVO.currentOrderPoints ? orderData.productInformationVO.currentOrderPoints : '0' }}
            </p>

            <div>
                <p class="m-b">
                    <span class="w">商品价格：</span>

                    <span>¥{{
                        orderData.productInformationVO && orderData.productInformationVO.totalPriceProduct ? orderData.productInformationVO.totalPriceProduct : '0'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">运费：</span>

                    <span>¥{{
                        orderData.productInformationVO && orderData.productInformationVO.freight ? orderData.productInformationVO.freight : '0'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">优惠：</span>

                    <span>¥{{
                        orderData.productInformationVO && orderData.productInformationVO.offer ? orderData.productInformationVO.offer : '0'
                    }}</span>
                </p>

                <p class="m-b">
                    <span class="w">积分抵扣：</span>

                    <span>¥{{
                        orderData.productInformationVO && orderData.productInformationVO.pointsDeduction ? orderData.productInformationVO.pointsDeduction : '0'
                    }}</span>
                </p>

                <p class="m-b"
                   style="font-size: 16px;font-weight: 600;"
                >
                    <span class="w">本单实收：</span>

                    <span>¥{{
                        orderData.productInformationVO && orderData.productInformationVO.actualAmountPaid ? orderData.productInformationVO.actualAmountPaid : '0'
                    }}</span>
                </p>
            </div>
        </div>
    </div>

    <div>
        <comPagination ref="comPaginationRef"
                       :dialog-data="goodSendDialog"
                       @goodsend-fn="goodsendFn"
        >
            <div class="goodsend">
                <p class="m-b">
                    <span>订单编号：</span>

                    <span>{{ query.orderNo }}</span>
                </p>

                <p class="m-b">
                    <span>下单时间：</span>

                    <span>{{ query.orderTime }}</span>
                </p>

                <p class="m-b">
                    <span>支付时间：</span>

                    <span>{{ query.paymentTime }}</span>
                </p>

                <el-form class="m-b"
                         label-position="top"
                         label-width="auto"
                         :model="goodSendForm"
                         style="max-width: 600px"
                >
                    <el-form-item label="快递公司">
                        <el-select v-model="goodSendForm.mail">
                            <el-option value="1"
                                       label="顺丰"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="快递单号">
                        <el-input v-model="goodSendForm.mailID" />
                    </el-form-item>
                </el-form>
            </div>
        </comPagination>
    </div>

    <div>
        <comPagination ref="cancelsendGoods"
                       :dialog-data="cancelSendGoodsData"
        >
            <div>
                <el-input type="textarea"
                          placeholder="请输入订单取消原因"
                          style="width: 400px;"
                          :rows="6"
                />
            </div>
        </comPagination>
    </div>
</template>

<style lang="scss" scoped>
.detail-header {
    padding: 10px 30px 30px;
    background-color: #fff;
    margin-bottom: 20px;

    .main-stap {
        height: 64px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.detail-info {
    padding: 10px 30px 30px;
    min-height: 200px;
    background-color: #fff;
    margin-bottom: 20px;

    .info {
        min-height: 200px;
        display: flex;

        li {
            flex: 1;

            // border: 1px solid red;
            .title {
                font-size: 16px;
                font-weight: 700;
                margin-left: 10px;
            }

            .m-r {
                margin-left: 18px;
            }

            .w {
                width: 90px;
                display: inline-block;
                text-align: end;
            }

            .m-b {
                margin-bottom: 10px;
                font-size: 14px;
                color: rgb(0 0 0 / 64.7%);
            }
        }
    }
}

.w {
    width: 90px;
    display: inline-block;
    text-align: end;
}

.m-b {
    margin-bottom: 10px;
    font-size: 14px;
    color: rgb(0 0 0 / 64.7%);
}

.detail-bottom {
    padding: 10px 30px 30px;
    background-color: #fff;

    .img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
}

.bottom-txt {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.goodsend {
    :deep(.el-form-item__label) {
        color: rgb(0 0 0 / 84.7%);
        font-size: 14px;
        font-weight: 600;
    }
}
</style>
